<template>
    <div>
        <!-- 菜单信息 用于新增或者修改  应该是一个表单 -->
        <el-dialog :title="info.type === 'add' ? '新增' : '修改'" :visible.sync="info.isShow" width="60%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="上级目录" prop="pid">
                    <el-select :disabled="info.type === 'adit'" v-model="ruleForm.pid" placeholder="请选择上级目录">
                        <el-option label="顶级目录" :value="0"></el-option>
                        <el-option v-for="(menu,index) in optionList" :key="index" :label="menu.title" :value="menu.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
                <el-form-item v-show="ruleForm.type === 1" label="图标" prop="icon">
                    <el-input v-model="ruleForm.icon"></el-input>
                </el-form-item>
                <el-form-item v-show="ruleForm.type === 2"  label="地址" prop="url">
                    <el-input v-model="ruleForm.url"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-radio-group :disabled="info.type === 'adit'" v-model="ruleForm.type">
                        <el-radio :label="1">目录</el-radio>
                        <el-radio :label="2">菜单</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {getTreeMenu,addMenu,editMenu} from '../../apis'
export default {
    props: ['info'],
    data() {
        return {
            ruleForm: {
                // 表单的数据
                pid: 0,
                title: "",
                icon: "",
                type: 1,
                url: "",
                status: 1
            },
            rules: {
                // 只有标题是必须添的
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ],
            },
            optionList:[]
        };
    },
    created(){
        // 获取下框对应的数据
        this.getOptionList()
    },
    methods:{
        // 这个函数的作用就是给ruleForm赋值，以显示表单的内容
        setVal(val){
            this.ruleForm = {...val}
        },
        async getOptionList(){
        let res = await  getTreeMenu();
        this.optionList = res.list;
        },
        submit(){
            this.$refs.ruleForm.validate(async valid => {
                if(valid){
                    let res;
                    // 区分新增还是修改
                    if(this.info.type === 'add'){
                        // 新增
                        res = await addMenu(this.ruleForm)
                    }else{
                        // 修改
                        res = await editMenu(this.ruleForm)
                    }
                    if(res.code == 200){
                        // 更新成功，通知list组件重新获取数据来更新列表
                        this.$emit('update')
                    }
                    // 关闭弹窗
                    this.close()
                }else{
                    console.log('error submit!!');
                    return false
                }
            })
        },
        close(){
            this.info.isShow = false
        }
    }
};
</script>

<style>

</style>
